<#include "common/layout/__mainlayout.html">
<#assign navLink='manage:user:list' />
<@mainlayout>
<div class="row-content am-cf">
	<div class="row">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
			<div class="widget am-cf">
				<div class="widget-head am-cf">
					<div class="widget-title am-fl"></div>
						<div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN SAMPLE TABLE PORTLET-->
                        <div class="portlet box green">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-comments"></i>用户管理
                                </div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse"> </a>
                                    <a href="#portlet-config" data-toggle="modal" class="config"> </a>
                                    <a href="javascript:;" class="reload"> </a>
                                    <a href="javascript:;" class="remove"> </a>
                                </div>
                            </div>
                            <div class="portlet-body">
                            	
                            	<div id="toolbar" class="btn-group">
                            	<@hasperm key="manage:user:markChange">
	                                <button id="btn_add" type="button" class="btn btn-success">
	                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>奖励奖惩
	                                </button>
	                            </@hasperm>
	                            <@hasperm key="manage:user:updateUserRole">
	                                <button id="btn_edit" type="button" class="btn btn-info">
	                                    <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>分配角色
	                                </button>
	                           </@hasperm>
	                           <@hasperm key="manage:user:delete">
	                                <button id="btn_delete" type="button" class="btn btn-danger">
	                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
	                                </button>
	                           </@hasperm>
	                            </div>
                            	
                                <div class="table-scrollable">
                                    <table class="table-striped table-hover" id="table"
                                           data-toggle="table"
                                           data-pagination="true"
                                           data-search="true"
                                           data-advanced-search="true"
                                           data-id-table="advancedTable" data-toolbar="#toolbar"
                                           data-url="${realpath}/manage/getUsers">
                                        <thead>
                                            <tr>
                                                <th data-checkbox="true"></th>
                                                <th data-field="userid" data-sortable="true">Id</th>
                                                <th data-field="userIcon" data-sortable="true" data-formatter="iconFormatter">头像</th>
                                                <th data-field="email" data-sortable="true">Email</th>
                                                <th data-field="userName" data-sortable="true">用户名</th>
                                                <th data-field="sex" data-sortable="true" >性别</th>
                                                <th data-field="mark" data-sortable="true" >积分</th>
                                                <th data-field="address" data-sortable="true" >地址</th>
                                                <th data-field="work" data-sortable="true" >工作</th>
                                                <th data-field="rolesList" data-sortable="true" data-formatter="roleFormatter">角色</th>
                                                <th data-field="registerTime" data-sortable="true" >注册时间</th>
                                                <th data-field="lastLoginTime" data-sortable="true" >上次登录时间</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- END SAMPLE TABLE PORTLET-->
                    </div>
					</div>
				<div class="widget-body  widget-body-lg am-fr">
				</div>
			</div>
		</div>
	</div>
</div>


 <!-- responsive -->
<div id="roleModal" class="modal fade" tabindex="-1" data-width="200">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    </div>
    <div class="modal-body"  style="font-size: 15px;">
	<form id="roleList">
		
	</form>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-danger">关闭</button>
        <button type="button" class="btn green" id="btn_save">保存</button>
    </div>
</div>


 <!-- responsive -->
<div id="markModal" class="modal fade" tabindex="-1" data-width="500">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    </div>
    <div class="modal-body"  style="font-size: 15px;">
	 <form class="form-horizontal" role="form" id="markForm">
                  <div class="form-body">
                       <div class="form-group">
                          <label class="col-md-3 control-label">积分</label>
                          <div class="col-md-9">
                              <input type="text" class="form-control" name="mark" id="mark" value=""> </div>
                      </div>                 
               
                     <div class="form-group">
                          <label class="col-md-3 control-label">描述</label>
                          <div class="col-md-9">
                              <textarea class="form-control" rows="5" name="des" id="des">
                              	
                              </textarea>
                      </div>
                  </div>
              </form>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-danger">关闭</button>
        <button type="button" class="btn green" id="mark_save">保存</button>
    </div>
</div>

</@mainlayout>
<script>
	function iconFormatter(value, row){
		return '<image class="img-circle" style="width:50px; height:50px;" src="${realpath}/resources/images/' + row.userIcon + '" />';
	}
    function nameFormatter(value, row) {
        var icon = row.id % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'
        return '<i class="glyphicon ' + icon + '"></i> ' + value;
    }

function roleFormatter(value, row) {
	var rolesList = row.rolesList;
	var roleName="";
	for(var i=0,_length=rolesList.length; i <_length;i++){
		if(i ==_length-1){
			roleName = roleName + rolesList[i].name;
		}
		else{
			roleName = roleName + rolesList[i].name  + "," ;
		}
	}
	return roleName;
}


$(document).ready(function() {
	$.ajax({
		url: '${realpath}/manage/role/load',
		type: 'post',
		dataType: 'json',
		success:function(res){
			var roleList = $("#roleList");
			var check = "";
			for(var i=0, _length=res.length; i < _length; i++){
                                                         check =  check +  '<div class="check-box"><input type="checkbox" name="roleIds" id=checkbox-' +  (i+1) + ' value="' + res[i].id+ '"><label for=checkbox-' + (i +1) + '>' + res[i].name + '</label></div>';
			}
			roleList.html(check);
		}
	});
	
});

$("#mark_save").click(function(event) {
	var userIds = getIds();
	var args=userIds + "&" +$("#markForm").serialize();
	$.ajax({
		url: '${realpath}/manage/user/markChange',
		type: 'post',
		dataType: 'json',
		data: args,
		success:function(res){
			if (res.errorMsg != null) {
			                    layer.msg(res.errorMsg, {
			                        icon: 5,
			                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
			                    });
			                } else {
			                    layer.msg('奖惩成功', {
			                        icon: 1,
			                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
			                    }, function() {
			                         $('#markModal').modal('hide');
			                          $('#table').bootstrapTable('refresh');
			                    });
			               }
		}
		
	});
	
});

$("#btn_save").click(function(event) {
	var userIds = getIds();
	var args=userIds + "&" +$("#roleList").serialize();
	$.ajax({
		url: '${realpath}/manage/user/updateUserRole',
		type: 'post',
		dataType: 'json',
		data: args,
		success:function(res){
			if (res.errorMsg != null) {
			                    layer.msg(res.errorMsg, {
			                        icon: 5,
			                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
			                    });
			                } else {
			                    layer.msg('分配成功', {
			                        icon: 1,
			                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
			                    }, function() {
			                        $('#table').bootstrapTable('refresh');
			                         $('#roleModal').modal('hide');
			                    });
			               }
		}
	});
	
});
    
    function getIds(){
 	   var userIds = "";
 	 	var selects = $('#table').bootstrapTable('getSelections');
 		for(var i = 0, _length=selects.length; i < _length ; i++){
 			if(i == _length-1){
                   userIds = userIds +"userIds=" + selects[i].userid;
               }
               else{
                   userIds = userIds + "userIds=" + selects[i].userid + "&";
               }
 		}
 		return userIds;
    }

    //
    function del(arr){
            layer.confirm('确认要删除吗？', {
        btn: ['是', '否'], //按钮
        shade: false //不显示遮罩
    }, function() {
    var d = dialog({
        content: "<div><img src='${realpath}/resources/images/loading.gif' />&nbsp;&nbsp;&nbsp;删除中...</div>",
    });
    d.showModal();
    setTimeout(function() {
        d.close().remove();
    }, 1000);
        $.ajax({
            url: '${realpath}/manage/user/delete',
            type: 'POST',
            dataType: 'json',
            data: arr,
            success: function(res) {
                if (res.errorMsg != null) {
                    layer.msg(res.errorMsg, {
                        icon: 5,
                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                    });
                } else {
                    layer.msg('删除成功', {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function() {
                        $('#table').bootstrapTable('refresh');
                    });
                }
            }
        });


    }, function() {

    });

    }

 //

$("#btn_add").click(function(event) {
	var arr = getIds();
    	if(arr.length == 0){
    		layer.msg("请选择要标记的行", {
				icon: 5,
				time: 1500 //2秒关闭（如果不配置，默认是3秒）
		});
		return;
    	}
    	   $('#markModal').modal('show');

});

 //

 $("#btn_edit").click(function(event) {
 	var arr = getIds();
    	if(arr.length == 0){
    		layer.msg("请选择要标记的行", {
				icon: 5,
				time: 1500 //2秒关闭（如果不配置，默认是3秒）
		});
		return;
    	}
    	   $('#roleModal').modal('show');		 
 });
    
    //
    $("#btn_delete").click(function(){
    	var arr = getIds();
    	if(arr.length == 0){
    		layer.msg("请选择要标记的行", {
				icon: 5,
				time: 1500 //2秒关闭（如果不配置，默认是3秒）
			});
			return;
    	}
        del(arr);
    });
</script>

